Curs de HTML
LECTIA a 9-a - 20 iunie 2000
În aceasta lectie vom prezenta o
a cunostintelor învatate în lectia a 8-a despre tabele si
atributele lor.
Am ales pentru aceasta, o tabla de sah denumita , care poate veni în ajutorul amatorilor de sah pe
internet.
În finalul lectiei veti afla despre un nou tag: <blink>
.
Iata cum va arata aceasta tabla de sah însotita de un text aliniat la dreapta folosind
tag-ul
<br clear="left">.
Nr. a b c d e f g h Negre 8 T C N D R N C T 8 7 P P P P P P P P 7 6 - - - - - - - - 6 5 - - - - - - - - 5 Albe 4 - - - - - - - - 4 3 - - - - - - - - 3 2 P P P P P P P P 2 1 T C N D R N C T 1 Nr. a b c d e f g h Instructiuni de folosire a tablei de Sah Minion
Pentru fiecare mutare în parte, mergeti la Sursa HTML si actualizati datele pentru pozitia pieselor, astfel:
1. La rubrica Nr. , scrieti numarul mutarii respective (sus, pentru piesele negre si jos, pentru piesele albe).
2. Efectuati mutarea piesei de sah, prin reamplasarea semnului conventional în pozitia noua (în pozitia veche, ramasa libera, înscrieti o liniuta).
3. Piesele scoase din joc, le mentionati în rubricile din stânga tablei de sah (sus, piesele negre si jos, piesele albe).
4. Dupa cum observati, eventualele comentarii legate de jocul de sah sau diverse mesaje pot fi înscrise alaturat tablei de sah, folosind astfel 100% spatiul de scris. Pentru aceasta trebuie ca la sfarsitul mesajului sa includeti tag-ul HTML
<br clear="left">5. Copiati textul HTML astfel actualizat, apasand pe butonul din dreapta al mouse-ului, alegeti comanda Copy, apoi Paste în pagina unde doriti sa apara tabla de sah.
Sursa HTML initiala (la începutul unei partide de sah), arata astfel:
<table border="1" align="left" width="160" cellspacing="0" bgcolor="#FFFFFF"
bordercolorlight="#00FF00" bordercolordark="#008000" bordercolor="#FF0000" height="120"
cellpadding="4">
<tr>
<td colspan="2" bgcolor="gray" valign="top"><em><font size="-1">Nr.</font></em></td>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">a</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">b</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">c</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">d</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">e</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">f</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">g</font></th>
<th bgcolor="#0080C0" width="4"><font color="red" size="-1">h</font></th>
<th bgcolor="#0080C0" width="4"> </th>
</tr>
<tr>
<td rowspan="4" bgcolor="#0080C0" valign="top"><em><font size="-1">Negre</font></em></td>
<td align="left" bgcolor="#0080C0"><font color="red" size="-1">8</font></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">T</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">C</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">N</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">D</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">R</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">N</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">C</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">T</font></strong></td>
<td align="right" bgcolor="#0080C0"><font color="red" size="-1">8</font></td>
</tr>
<tr>
<td align="left" bgcolor="#0080C0"><font color="red" size="-1">7</font></td>
<td align="center" bgcolor="gray"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font size="-1">P</font></strong></td>
<td align="right" bgcolor="#0080C0"><font color="red" size="-1">7</font></td>
</tr>
<tr>
<td align="left" bgcolor="#0080C0"><font color="red" size="-1">6</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="right" bgcolor="#0080C0"><font color="red" size="-1">6</font></td>
</tr>
<tr>
<td align="left" bgcolor="#0080C0"><font color="red" size="-1">5</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="right" bgcolor="#0080C0"><font color="red" size="-1">5</font></td>
</tr>
<tr>
<td rowspan="4" bgcolor="#AAEEFF" valign="top"><em><font size="-1">Albe</font></em></td>
<td align="left" bgcolor="#AAEEFF"><font color="red" size="-1">4</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="right" bgcolor="#AAEEFF"><font color="red" size="-1">4</font></td>
</tr>
<tr>
<td align="left" bgcolor="#AAEEFF"><font color="red" size="-1">3</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="center" bgcolor="gray"><font size="-1">-</font></td>
<td align="center" bgcolor="#FFFFFF"><font size="-1">-</font></td>
<td align="right" bgcolor="#AAEEFF"><font color="red" size="-1">3</font></td>
</tr>
<tr>
<td align="left" bgcolor="#AAEEFF"><font color="red" size="-1">2</font></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">P</font></strong></td>
<td align="right" bgcolor="#AAEEFF"><font color="red" size="-1">2</font></td>
</tr>
<tr>
<td align="left" bgcolor="#AAEEFF"><font color="red" size="-1">1</font></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">T</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">C</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">N</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">D</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">R</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">N</font></strong></td>
<td align="center" bgcolor="gray"><strong><font color="blue" size="-1">C</font></strong></td>
<td align="center" bgcolor="#FFFFFF"><strong><font color="blue" size="-1">T</font></strong></td>
<td align="right" bgcolor="#AAEEFF"><font color="red" size="-1">1</font></td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFFFFF" valign="top"><em><font size="-1">Nr.</font></em></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">a</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">b</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">c</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">d</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">e</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">f</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">g</font></td>
<td align="center" bgcolor="#AAEEFF"><font color="red" size="-1">h</font></td>
<td align="center" bgcolor="#AAEEFF"> </td>
</tr>
</table>
<p>Comentarii:</p>
<br clear="left">
însotita de comentariul dumneavoastra va arata astfel:
Nr. a b c d e f g h Negre 8 T C N D R N C T 8 7 P P P P P P P P 7 6 - - - - - - - - 6 5 - - - - - - - - 5 Albe 4 - - - - - - - - 4 3 - - - - - - - - 3 2 P P P P P P P P 2 1 T C N D R N C T 1 Nr. a b c d e f g h Comentarii:
Tag-ul <blink> se foloseste de cele mai multe ori pentru reclame sau pentru a atrage atentia cititorului asupra unui text din pagina Web. Efectul obtinut prin aplicarea acestui tag este, asa cum arata si denumirea, de clipire a textului respectiv, simuland o reclama luminoasa care se aprinde si se stinge, alternativ.
Iata un exemplu de scriere:
<p>Un bec care <font color="red"><blink>se aprinde</blink></font> si <font color="white"><blink>se stinge</blink></font></p>
Efectul va fi urmatorul:
Un bec care si
Do you like it !
SUCCES !